<template>
  <div class="body">
    <div class="padding-sm">
      <van-button @click="headerRequest">请求</van-button>
      <div>{{ requestValue }}</div>
    </div>
    <div class="padding-sm">
      <div class="grid-cont padding-bottom">
        <div class="foo flex justify-center align-center">foo</div>
        <div class="bar">a</div>
        <div class="bar">b</div>

        <div class="foo flex justify-center align-center">c</div>
        <div class="bar">d</div>
        <div class="bar" style="padding: 20px">
          <div class="padding">e</div>
        </div>
      </div>
    </div>
    <div class="padding-sm">
      <div class="grid-cont padding-bottom">
        <div class="hello flex justify-center align-center">hello</div>
        <div class="world flex justify-center align-center">world</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, getCurrentInstance} from 'vue';

const instance = getCurrentInstance();
const that: any = instance?.proxy;
const requestValue = ref('');
const headerRequest = async () => {
  that.$toast.loading({
    duration: -1, // 不自动关闭弹框
    message: '加载中...', // 文案
    forbidClick: true // 是否开启背景透明遮罩
  });
  const res = await that.$http.get('http://koa-mvc.zhizous.cn/api/user/test', {
    hello: '1',
    a: 1,
    b: 'c'
  });
  that.$toast.clear(); // 关闭弹框
  if (res.code === 200) {
    requestValue.value = JSON.stringify(res.result);
  }
};
</script>

<style lang="less" scoped>
.body {
  background: #000000;
  min-height: 80vh;
}

.foo, .bar, .hello, .world {
  border: 1px solid white;
  padding: 10px 0;
  background: #60d659;
  color: white;
  text-align: center;
}
.foo{

}
.grid-cont {
  display: grid;
  //grid-template-areas: "a a";
  grid-template-columns: 1fr auto;
}

.world{
  box-sizing: border-box;
  width: 100px;
}
</style>
